<template>

  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width" :ok-text="LAYER.okText"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :closable="LAYER.closable" :unmount-on-close="LAYER.unmountOnClose"
           :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose" :ok-loading="LAYER.okLoading"
           :on-before-ok="onSubmit" @cancel="onClose()">

    <a-form ref="formRef" :model="formState" :rules="CONFIG_ITEM_EDIT.RULES" auto-label-width layout="vertical">
      <a-row :gutter="[12,12]">
        <a-col :span="12">
          <a-form-item label="参数代码" field="code">
            <a-input v-model.trim="formState.code" placeholder="请填写 参数代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="参数名称" field="name">
            <a-input v-model="formState.name" placeholder="请填写参数名称"/>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="参数值" field="value">
            <a-input v-model="formState.value" placeholder="请填写参数值"/>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="参数描述" field="description">
            <a-textarea v-model="formState.description" placeholder="请填写配置项描述"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="编辑权限" field="allowEdit">
            <smart-bool v-model="formState.allowEdit" true-text="允许编辑" false-text="禁止编辑"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="删除权限" field="allowDel">
            <smart-bool v-model="formState.allowDel" true-text="允许删除" false-text="禁止删除"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>

</template>
<script lang="ts" setup>

import { ref} from "vue";
import {LocalModal} from "@/libs/core";
import {CONFIG_ITEM_EDIT} from '../resource/form'

const props = defineProps({
  record: {type: Object, required: true}
})
const emit = defineEmits(['close'])
const formRef = ref(null)
const isUpdate = props.record?.code !== undefined

const formState = ref({...CONFIG_ITEM_EDIT.BODY})

// @ts-ignore:
if (isUpdate) formState.value = {...props.record}

const title = isUpdate ? '修改配置项' : '新增配置项'
const service = new LocalModal(emit).setMD(title, '保存设置', 550)
const {LAYER, lockMd, unLockMd} = service

const onClose = (data = {}) => {
  LAYER.visible = false
  emit('close', data)
}


const onSubmit = async () => {
  lockMd()
  const err = await formRef.value.validate();
  if (err !== undefined) return false
  lockMd()
  onClose(formState.value)
  unLockMd()
}


</script>

